<template>
	<baseDialog ref="dialogRef" :title="dialogTitle" width="680px" :showFooter="false" @close="handleClose">
		<el-descriptions class="w-full" direction="horizontal" :column="1" border>
			<el-descriptions-item class-name="el-descriptions-content-break" label-class-name="w-[120px]" label="用户">{{
				detailData.account
			}}</el-descriptions-item>
			<el-descriptions-item class-name="el-descriptions-content-break" label-class-name="w-[120px]" label="操作">{{
				detailData.action
			}}</el-descriptions-item>
			<el-descriptions-item class-name="el-descriptions-content-break" label-class-name="w-[120px]" label="请求方式">{{
				detailData.type
			}}</el-descriptions-item>
			<el-descriptions-item class-name="el-descriptions-content-break" label-class-name="w-[120px]" label="请求UA">{{
				detailData.ua
			}}</el-descriptions-item>
			<el-descriptions-item class-name="el-descriptions-content-break" label-class-name="w-[120px]" label="访问链接">{{
				detailData.url
			}}</el-descriptions-item>
			<el-descriptions-item class-name="el-descriptions-content-break" label-class-name="w-[120px]" label="访问参数">{{
				detailData.params
			}}</el-descriptions-item>
			<el-descriptions-item class-name="el-descriptions-content-break" label-class-name="w-[120px]" label="来源IP">{{
				detailData.ip
			}}</el-descriptions-item>
			<el-descriptions-item class-name="el-descriptions-content-break" label-class-name="w-[120px]" label="执行耗时">{{
				detailData.execute_time
			}} 秒</el-descriptions-item>
			<el-descriptions-item class-name="el-descriptions-content-break" label-class-name="w-[120px]" label="状态">{{
				detailData.status_desc
			}}</el-descriptions-item>
			<el-descriptions-item class-name="el-descriptions-content-break" label-class-name="w-[120px]" label="创建时间">{{
				detailData.create_time
			}}</el-descriptions-item>
		</el-descriptions>
	</baseDialog>
</template>

<script setup lang="ts" name="userLogDetail">
import { ref, computed } from 'vue';
import { visitDetail } from '/@/api/user/visit';

const dialogRef = ref(null);

const dialogTitle = computed(() => {
	return '用户日志详情';
});

const emit = defineEmits(['close']);

const detailData = ref(null);

const setFormData = async (row: any, callback: any) => {
	const data = await visitDetail({
		id: row.id,
	});

	detailData.value = data;

	callback();
};

const handleClose = () => {
	emit('close');
};

const open = () => {
	dialogRef.value?.open();
};

defineExpose({
	open,
	setFormData,
});
</script>
